
@font-face {
    font-family: 'icomoon';
    src:  url('../font/icomoon.eot?tm2q5y');
    src:  url('../font/icomoon.eot?tm2q5y#iefix') format('embedded-opentype'),
      url('../font/icomoon.ttf?tm2q5y') format('truetype'),
      url('../font/icomoon.woff?tm2q5y') format('woff'),
      url('../font/icomoon.svg?tm2q5y#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }

@mixin fontColor {
    color: #f22e00;
}
@mixin liBgc {
    background-color: #f4f4f4;
}
body{
    background-color: #fff;
}

.w{
    width: 1350px;
    margin: 0 auto;
}
.header{
    width: 100%;
    line-height: 36px;
    font-size: 12px;
    color: #6c6c6c;
    background-color: #f5f5f5;

    .headLeft{
        float: left;

        & >li{
            float: left;
            padding: 0 6px;
        }

        .district{
            font-family: 'icomoon';
            position: relative;

            &:hover{
                background-color: #fff;
            }

            &:hover .diSub{
                display: block;
                cursor: pointer;
            }

            .diSub{
                position: absolute;
                top: 36px;
                left: 0;
                width: 242px;
                height: 26.5px*10;
                padding: 8px 0;
                overflow-y: scroll;
                background-color: #fff;
                display: none;

                li{
                    padding-left: 8px;
                    line-height: 29px;

                    &:hover{
                        @include liBgc();
                    }
                }
            }
        }

        .tips{
            position: relative;
            .login{
                @include fontColor();
                margin-right: 5px;
            }
    
            .regist{
                color: #6c6c6c;
            }
    
            .regist:hover{
                @include fontColor();
            }

            .exit{
                width: 100px;
                height: 30px;
                position: absolute;
                top: 29px;
                left: 0;
                background: #fff;
                display: none;

                &:hover{
                    cursor: pointer;
                }
            }
        }

        .mobile:hover{
            @include fontColor();
        }
    }

    .headRight{
        float: right;
        &>li{
            float: left;
            padding: 0 6px;
            position: relative;

            i{
                font-family: 'icomoon';
            }

            &:not([class]):hover{
                @include fontColor();
            }

            .subNav{
                width: max-content;
                padding: 8px 0;
                font-size: 12px;
                line-height: 29px;
                color: #6c6c6c;
                background-color: #fff;
                position: absolute;
                top: 36px;
                left: 0;
                display: none;
                z-index: 99999;

                li{
                    padding: 0 8px;
                }
            }

        }
        .myTaobao:hover{
            background-color: #fff;
            @include fontColor();

            .subNav{
                display: block;

                li{
                    &:hover{
                        background-color: #f4f4f4;
                        cursor: pointer;
                    }
                }
            }
        }
        .shopCar{
            .icon,.count{
                font-weight: 800;
                @include fontColor();
            }
            .subNav li{
                span{
                    float: left;
                    margin-left: 20px;
                }
                a{
                    float: right;
                    background-color: #ff4400;
                    color: #fff;
                    line-height: 29px;
                    padding: 0 8px;
                }
            }



            &:hover{
                background-color: #fff;
                @include fontColor();
    
                .subNav{
                    display: block;
                }
            }
        }

        .separated{
            color: #e2dddd;
        }
    }
}

.goodsSearch{
    height: 60px;
    padding-top: 16px;
    box-sizing: border-box;

    .logo{
        float: left;
        width: 105px;
        height: 44px;
        a{
            display: block;
            width: 100%;
            height: 100%;
            background-image: url(../images/logo.png);
            background-repeat: no-repeat;
            background-size: 105px 44px;
        }
    }

    .searchBar{
        float: left;
        width: 811px;
        height: 35px;
        margin-left: 155px;
        margin-top: 3px;

        .wraper{
            float: left;
            width: 729px;
            height: 31px;
            border: 2px solid #ff5500;
            border-right: 0;
            background-color: #fff;

            .selected{
                float: left;
                width: 67px;
                height: 31px;
                line-height: 31px;
                font-size: 12px;
                text-align: center;
                color: #6b6b6b;
                background-color: #f5f5f5;

                &:hover span::after{
                    content: '\e909';
                }
                
                span::after{
                    content: '\e906';
                    font-family: 'icomoon';
                    margin-left: 10px;
                    margin-top: 3px;
                }
            }

            .searchCon{
                float: left;
                width: 662px;
                height: 100%;
                text-indent: 5px;
                border: 0;
                margin: 0;
                padding: 0;
                outline: 0;

                &::-webkit-input-placeholder{
                    font-size: 14px;
                    color: #757575;
                }
            }
        }

        .searchBtn{
            float: left;
            width: 80px;
            height: 35px;

            a{
                display: block;
                width: 100%;
                height: 100%;
                text-align: center;
                line-height: 35px;
                background-color: #ff4400;
                color: #fff;
                font-weight: 700;
                font-family: '微软雅黑';
            }
        }
    }

}

.main{
    margin-top: 10px;
    .mainLeft{
        float: left;
        width: 1070px;

        .LeftHeader{
            height: 38px;
            border-bottom: 2px solid #ff4400;
            ul{
                li{
                    float: left;
                    padding: 0 20px;
                    text-align: center;
                    line-height: 37px;

                    &:hover{
                        background-color: #ff4400;
                        color: #fff;
                    }
                }
                .mainActive{
                    background-color: #ff4400;
                    color: #fff;
                }
            }
        }

        .sort{
            height: 39px;
            border: 1px solid #e8e8e8;
            background-color: #f5f5f5;
            line-height: 39px;
            font-size: 12px;
            font-family: 'icomoon';
            
            i{
                display: inline-block;
                vertical-align: middle;
            }
            .sortLeft{
                float: left;
                li{
                    float: left;
                    padding: 0 19px;
                    box-sizing: border-box;

                    &:hover{
                        background-color: #fff;
                        color: #ff5500;
                        border-right: 1px solid #e8e8e8;
                        border-left: 1px solid #e8e8e8;
                    }

                    i{
                        margin-left: 3px;
                    }

                }
                .price{
                    height: 39px;
                    position: relative;

                    .sorting{
                        display: none;
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 123px;
                        border: 1px solid #e5e5e5;
                        background-color: #fff;
                        
                        p{
                            text-align: center;
                            &:hover {
                                color: #ff5500;
                                cursor: pointer;
                            }
                        }
                    }

                    &:hover .sorting{
                        display: block;
                        color: #000;
                    }
                }

                .sortActive{
                    background-color: #fff;
                    color: #ff5500;
                    border-right: 1px solid #e8e8e8;
                    border-left: 1px solid #e8e8e8;
                }
            }

            .sortRight{
                float: right;

                li{
                    float: left;
                    padding: 0 19px;

                    .pageNum{
                        color: #fe444f;
                        margin-left: 10px;
                    }
                    .totalNum{
                        margin-right: 10px;
                    }
                }
            }
        }

        .leftGoods{
            margin-top: 20px;
            ul{
                li{
                    float: left;
                    width: 250px;
                    height: 390px;
                    margin-top: 22px;
                    margin-right: 15px;
                    border: 1px solid #ededed;
                    position: relative;

                    &:hover{
                        border-color: #ff4400;

                        .icon-btn-report{
                            display: block;
                        }
                    }

                    .doubi{
                        position: relative;

                        &:hover .same{
                            display: flex;
                        }

                        .showImg{
                            display: block;
                            width: 250px;
                            height: 250px;
                            img{
                                width: 100%;
                                height: 100%;   
                            }
    
                        }
                        .same{
                            display: none;
                            width: 100%;
                            height: 30px;
                            background-color: #e9531f;
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            opacity: 0.8;
                            
                            a{
                                display: block;
                                line-height: 30px;
                                flex: 1;
                                text-align: center;
                                font-size: 12px;
                                color: #fff;
                                opacity: 1;
                            }
                            a+a{
                                border-left: 1px solid #ccc;
                            }
                        }
                    }

                    .goodsPrice{
                        width: 230px;
                        height: 22px;
                        padding: 0 10px;
                        margin-top: 11px;
                        line-height: 22px;
                        span{
                            font-size: 16px;
                            color: #ff4400;
                        }
                        .rmb{
                            font-size: 18px;
                            font-weight:800;
                            color: #ff4400;
                        }

                        div{
                            display: inline-block;
                            width: 27px;
                            height: 14px;
                            margin-top: 4px;
                            margin-left: 2px;
                            background-image: url(../images/zhanggui.png);
                            background-repeat: no-repeat;
                            background-position: -42px -139px;
                        }
                        p{
                            float: right;
                            font-size: 12px;
                            color: #888888;
                        }
                    }

                    .row3{
                        height: 36px;
                        margin-top: 6px;
                        padding: 0 10px;
                        overflow: hidden;
                        font-weight: 400;
                        font-size: 12px;
                        line-height: 18px;

                        &:hover a{
                            color: #ff4400;
                            border-bottom: 1px solid #ff4400;
                        }
                    }

                    .row4{
                        height: 22px;
                        padding: 0 10px;
                        line-height: 22px;

                        .drsr{
                            float: left;
                            width: 13px;
                            height: 12px;
                            margin-top: 4px;
                            span{
                                display: block;
                                width: 8px;
                                height: 2px;
                                background-color: #ff4400;
                                margin-top: 2px;
                            }
                        }
                        .store{
                            float: left;
                            font-size: 12px;
                            color: #888888;

                            a{
                                border-bottom: 1px solid #888888;

                                &:hover{
                                    color: #ff4400;
                                    border-bottom: 1px solid #ff4400;
                                }
                            }
                        }
                        .address{
                            font-size: 12px;
                            color: #888888;
                            float: right;
                        }
                    }

                    .row5{
                        height: 20px;
                        margin-top: 10px;
                        padding: 0 10px 0 6px;
                        overflow: hidden;

                        .feature-icons{
                            float: left;

                            a{
                                display: block;
                                width: 16px;
                                height: 16px;
                                background-image: url(../images/zhanggui.png);
                                background-repeat: no-repeat;
                                background-position: -213px -199px;
                            }
                        }
                        .wangwang{
                            float: right;

                            a{
                                display: block;
                                width: 16px;
                                height: 16px;
                                background-image: url(../images/goodsListBg.png);
                                background-repeat: no-repeat;
                                background-position: -435px -86px;
                            }
                        }
                    }

                    .icon-btn-report{
                        position: absolute;
                        top: 0;
                        right: 0;
                        display: none;

                        a{
                            display: block;
                            width: 11px;
                            height: 10px;
                            background-image: url(../images/goodsListBg.png);
                            background-repeat: no-repeat;
                            background-position: -125px -103px;
                        }
                    }
                }
            }
        }

        .wraper{
            width: 650px;
            height: 37px;
            margin: 0 auto;
            margin-top: 15px;
            line-height: 37px;

            ul{
                margin-left: 222px;
                li{
                    float: left;
                    width: 70px;
                    height: 35px;
                    text-align: center;
                    line-height: 35px;
                    border: 1px solid #ededed;
                    margin: 0 10px;

                    &:hover{
                        cursor: pointer;
                    }
                }
                p{
                    float: left;
                }
            }
        }

    }
    .mainRight{
        float: right;
        width: 270px;

        .rightTtile{
            height: 37px;
            line-height: 37px;
            border-bottom: 1px solid #e8e8e8;
            h3{
                float: left;
                font-size: 14px;
                font-weight: 700;
            }
            p{
                float: right;
                width: 26px;
                height: 16px;
                margin-top: 12px;
                background-image: url(../images/guanggao.png);
                background-repeat: no-repeat;
                background-position: 0 0;
            }
        }
        .rightGoods{
            margin-top: 15px;
            li{
                width: 270px;
                border: 1px solid #e5e5e5;
                position: relative;
                margin-bottom: 10px;

                img{
                    width: 100%;
                    height: 270px;
                }
                .rightFoot{
                    width: 248px;
                    height: 18px;
                    line-height: 18px;
                    margin: 5px 10px;
                    display: flex;

                    .one{
                        width: 16px;
                        height: 16px;
                        margin-top: 2px;
                        margin-right: 6px;
                        background-image: url(../images/zhanggui.png);
                        background-repeat: no-repeat;
                        background-position: -213px -199px;

                    }
                    span{
                        color: #ff4400;
                        font-size: 14px;
                    }
                    .rightPrice{
                        font-size: 18px;
                        font-weight: 700;
                        margin-right: 70px;
                    }
                    .rightSales{
                        font-size: 12px;

                        i{
                            font-weight: 700;
                        }
                    }
                }

                &:hover{
                    border-color: #ff4400;

                    .like{
                        display: block;
                    }
                }
                .like{
                    display: none;
                    width: 270px;
                    position: absolute;
                    left: 0;
                    bottom: 30px;
                    background: rgba(255,255,255,.5);
                    .like-hd{
                        height: 24px;
                        line-height: 24px;
                        display: flex;
                        border-bottom: 1px solid #000;
        
                        a{
                            flex: 1;
                            text-align: center;
                            font-size: 12px;
                        }
                        a+a{
                            border-left: 1px solid #000;
                        }
                    }
                    .like-bd{
                        overflow: hidden;
                        height: 35px;
                        padding-left: 10px;
                        line-height: 35px;
                        font-weight: 700;
                        font-size: 13px;
                    }
                }
            }
        }

    }
}

.a{
    height: 300px;
}